<template>
  <div class="footer-page">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-width="160px"
    >
      <template v-if="type === 'info'">
        <el-form-item
          label="品类一级名称:"
          prop="cate_name"
        >
          <el-input v-model="form.cate_name" />
        </el-form-item>
        <el-form-item
          label="品类缩略图:"
          prop="cate_img"
        >
          <crop-upload
            show-type="photo"
            :init-val="form.cate_img"
            file-size="100K"
            wrapper-width="95px"
            wrapper-height="95px"
            @setVal="(val)=>setUrl(val)"
          />
        </el-form-item>
        <el-form-item>
          缩略图尺寸要求为 宽：95px，高：95px
        </el-form-item>
      </template>
      <el-form-item
        v-if="type === 'child'"
        label="新增子品类:"
      >
        <el-select
          v-model="form.second_id"
          multiple
          filterable
          placeholder="一级分类"
        >
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="type !== 'child'"
        label="排序:"
      >
        <el-input-number
          v-model="form.cate_sort"
          :min="0"
        />
      </el-form-item>
      <el-form-item label="状态:">
        <el-radio
          v-model="form.status"
          :label="1"
        >显示</el-radio>
        <el-radio
          v-model="form.status"
          :label="0"
        >隐藏</el-radio>
      </el-form-item>
    </el-form>
    <div class="page-footer-btns">
      <el-button
        size="small"
        @click="resetForm"
      >重置</el-button>
      <el-button
        size="small"
        type="primary"
        @click="submitForm"
      >保存</el-button>
    </div>
  </div>
</template>

<script>
import cropUpload from '@/components/cropUpload'
import { h5HomeSecondCategoryById, addOrEditH5HomeCategory, h5HomeCategoryById, addOrEditH5HomeSecondCategory } from '@/api/web'
export default {
  components: { cropUpload },
  props: ['type', 'editId'],
  data() {
    return {
      cateList: [], // 关联子分类列表
      form: {
        id: null,
        second_id: [],
        cate_name: '',
        cate_sort: 0,
        status: 1,
        cate_img: ''
      }
    }
  },
  computed: {
    rules() {
      if (this.type === 'info') {
        return {
          cate_name: [
            { required: true, message: '品类一级名称', trigger: 'change' }
          ],
          cate_img: [
            { required: true, message: '请上传缩略图', trigger: 'change' }
          ]
        }
      } else {
        return {}
      }
    }
  },
  mounted() {
    if (this.type === 'info') {
      if (this.editId) {
        // 编辑信息
        this.$route.meta.title = '编辑品类模板'
        this.getData()
      } else {
        // 添加信息
        this.$route.meta.title = '添加品类模板'
      }
    } else {
      this.getList()
      this.form.id = this.editId
      this.$route.meta.title = '关联子品类'
    }
  },
  methods: {
    setUrl(val) {
      this.form.cate_img = val
    },
    // 编辑获取信息
    getData() {
      h5HomeCategoryById(this.editId).then(res => {
        this.form.id = res.id
        this.form.cate_name = res.cate_name
        this.form.cate_img = res.cate_img
        this.form.cate_sort = res.cate_sort
        this.form.status = res.status
      })
    },
    // 表单提交
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.type === 'info') {
            const { cate_name, cate_img, cate_sort, status, id } = this.form
            addOrEditH5HomeCategory({ cate_name, cate_img, cate_sort, status, id }).then(res => {
              if (!this.editId) {
                // 新增跳转列表页
                this.$router.push({ name: 'h5ConfigCategory' })
              }
            })
          } else {
            const { second_id, status, id } = this.form
            if (second_id.length === 0) {
              this.$message({
                message: '请选择关联子品类',
                type: 'warning'
              })
              return
            }
            addOrEditH5HomeSecondCategory({ parent_id: id, cate_idstr: second_id.join(','), status }).then(res => {
              this.$router.push({ name: 'h5ConfigCategory' })
            })
          }
        } else {
          this.$message({
            message: '请检查表单错误',
            type: 'error'
          })
          return false
        }
      })
    },
    // 重置
    resetForm() {
      this.$refs['form'].resetFields()
      if (this.type === 'info' && this.editId) {
        this.getData()
      } else {
        this.form = {
          id: null,
          second_id: [],
          cate_name: '',
          cate_sort: 0,
          status: 1,
          cate_img: ''
        }
      }
    },
    // 获取下拉列表
    getList() {
      h5HomeSecondCategoryById(this.editId).then(res => {
        this.cateList = res
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.img-uploader {
  .el-upload {
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .img-uploader-icon {
    font-size: 28px;
    border: 1px dashed #e6e6e6;
    border-radius: 6px;
    color: #8c939d;
    text-align: center;
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  .img-uploader-img {
    width: 100px;
    height: 100px;
  }
}
</style>
